Wallet.tsx ➔ Wallet - Code Metrics - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

Wallet.tsx ➔ Wallet B
last analyzed 2023-01-12 17:40 UTC

↳ Parent: components/drawer/Wallet.tsx

Complexity

Conditions

Size

Total Lines	105
Code Lines	91

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	91
dl	0
loc	105
rs	7.2945
c	0
b	0
f	0
cc	3

How to fix Long Method

import React from 'react';
import { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Pressable, Modal, TextInput} from 'react-native';
import userModel from '../../models/user';
import Icon from 'react-native-vector-icons/Octicons';

export default function Wallet({navigation}): any {
    const [balance, setBalance] = useState(null);
    const [modalVisible, setModalVisible] = useState(false);
    const [prepaid, setPrepaid] = useState(null);
    
    async function getBalance(): Promise<void> {
        const result = await userModel.getBalance();
        setBalance(result);

    };

    //Get balance for logged in user
    useEffect(() => {
        getBalance();
    });
    
    useEffect(() => {
        navigation.addListener('focus', () => getBalance())
    }, []);

    async function addBalance() {
        setModalVisible(false);
        const result = await userModel.addFunds(prepaid);
        const updatedBalance = await userModel.getBalance();
        
        setBalance(updatedBalance);
    };



    return (
        <View style={styles.container}>
        <View style={styles.titleContainer}>
                
                <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => navigation.navigate('Map')}>
                    <Icon 
                        name='x' 
                        size={25} 
                        color='black'
                    />
                </Pressable>
                
                <Text style={styles.title}>Your balance</Text>

                <View style={{width: 50}}></View>

            </View>


            <View style={[styles.infoContainer]}>
                <Text style={styles.balance}>{balance} kr</Text>
                <Text style={styles.info}>You should have at least SEK 30 in your wallet to start the journey</Text>
            </View>
            
            <View style={styles.prepaidContainer}>
                <Text style={styles.prepaidInfo}>Use prepaid card to deposit money</Text>
                <Pressable style={[styles.prepaidButton, styles.shadowProp]} onPress={() => setModalVisible(true)}> 
                    <Text style={styles.buttonText} > Use prepaid card </Text> 
                </Pressable>
            </View>

            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                setModalVisible(!modalVisible);
                }}
            >
                <View style={styles.modalContainer}></View>
                <View style={styles.modalMessage}>

                <View style={styles.modalCloseContainer}>

                    <Pressable style={[styles.closeButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
                        <Icon 
                            name='x' 
                            size={15} 
                            color='black'
                        />
                    </Pressable>

                </View>

                    <TextInput
                    placeholder="Enter prepaid card number"
                    style={styles.input}
                    keyboardType="email-address"
                    onChangeText={(content: string) => {
                        setPrepaid(content)
                    }}

                    onSubmitEditing={() => addBalance()
                    }
                    />

                <Pressable style={styles.submitButton} onPress={() => addBalance()}>
                    <Text style={styles.buttonText}>Submit</Text>
                </Pressable>
                </View>
            </Modal>
            

        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      height: '50%',
      width: '100%'

    },

    titleContainer: {
        marginTop: 20,
        width: '100%',
        flexDirection: 'row',
        height: 100,
        justifyContent: 'center',
        alignItems: 'center'
    },


    prepaidButton: {
        backgroundColor: 'cornflowerblue',
        width: '90%',
        height: 50,
        borderRadius: 50,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 30,
    },

    submitButton: {
        backgroundColor: 'forestgreen',
        width: '50%',
        height: 50,
        borderRadius: 50,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },

    infoContainer: {
        width: '100%',
        height: 350,
        alignItems: 'center',
        justifyContent: 'space-evenly',

    },

    prepaidContainer: {
        width: '90%',
        height: '30%',
        alignItems: 'center',
        justifyContent: 'center',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderColor: 'grey',
    },

    buttonText: {
        color: 'white'
    },

    backButton: {
        width: 40,
        height: 40, 
        backgroundColor: 'white',
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },
    modalCloseContainer: {
        width: '90%',
        alignItems: 'flex-end',
    },

    closeButton: {
        width: 25,
        height: 25, 
        backgroundColor: 'white',
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },

    title: {
        fontWeight: 'bold',
        fontSize: 20,
        width: '70%',
        textAlign: 'center'
    },

    balance: {
        fontWeight: 'bold',
        fontSize: 50
    },

    info: {
        fontSize: 15,
        width: '80%',
        color: 'gray',
        textAlign: 'center'
    },

    prepaidInfo: {
        fontWeight: 'bold',
        fontSize: 18
    },

    shadowProp: {
        elevation: 5,
        shadowColor: 'black'
      },

    modalContainer: {
        backgroundColor: 'rgba(220, 220, 220, 0.6)',
        width: '100%',
        height: '100%',
        flex: 1,
    },
    
    modalMessage: {
        backgroundColor: 'white',
        width: '100%',
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 25
    },

    input: {
        width: '90%',
        marginBottom: 30,
        borderRadius: 10,
        height: 50,
        padding: 10,
        borderBottomWidth: 2,
        borderColor: 'gray'
    },
});

1			import React from 'react';
2			import { useState, useEffect } from 'react';
3			import { StyleSheet, Text, View, Pressable, Modal, TextInput} from 'react-native';
4			import userModel from '../../models/user';
5			import Icon from 'react-native-vector-icons/Octicons';
6
7			export default function Wallet({navigation}): any {
8			const [balance, setBalance] = useState(null);
9			const [modalVisible, setModalVisible] = useState(false);
10			const [prepaid, setPrepaid] = useState(null);
11
12			async function getBalance(): Promise<void> {
13			const result = await userModel.getBalance();
14			setBalance(result);
15
16			};
17
18			//Get balance for logged in user
19			useEffect(() => {
20			getBalance();
21			});
22
23			useEffect(() => {
24			navigation.addListener('focus', () => getBalance())
25			}, []);
26
27			async function addBalance() {
28			setModalVisible(false);
29			const result = await userModel.addFunds(prepaid);
30			const updatedBalance = await userModel.getBalance();
31
32			setBalance(updatedBalance);
33			};
34
35
36
37			return (
38			<View style={styles.container}>
39			<View style={styles.titleContainer}>
40
41			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => navigation.navigate('Map')}>
42			<Icon
43			name='x'
44			size={25}
45			color='black'
46			/>
47			</Pressable>
48
49			<Text style={styles.title}>Your balance</Text>
50
51			<View style={{width: 50}}></View>
52
53			</View>
54
55
56			<View style={[styles.infoContainer]}>
57			<Text style={styles.balance}>{balance} kr</Text>
58			<Text style={styles.info}>You should have at least SEK 30 in your wallet to start the journey</Text>
59			</View>
60
61			<View style={styles.prepaidContainer}>
62			<Text style={styles.prepaidInfo}>Use prepaid card to deposit money</Text>
63			<Pressable style={[styles.prepaidButton, styles.shadowProp]} onPress={() => setModalVisible(true)}>
64			<Text style={styles.buttonText} > Use prepaid card </Text>
65			</Pressable>
66			</View>
67
68			<Modal
69			animationType="slide"
70			transparent={true}
71			visible={modalVisible}
72			onRequestClose={() => {
73			setModalVisible(!modalVisible);
74			}}
75			>
76			<View style={styles.modalContainer}></View>
77			<View style={styles.modalMessage}>
78
79			<View style={styles.modalCloseContainer}>
80
81			<Pressable style={[styles.closeButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
82			<Icon
83			name='x'
84			size={15}
85			color='black'
86			/>
87			</Pressable>
88
89			</View>
90
91			<TextInput
92			placeholder="Enter prepaid card number"
93			style={styles.input}
94			keyboardType="email-address"
95			onChangeText={(content: string) => {
96			setPrepaid(content)
97			}}
98
99			onSubmitEditing={() => addBalance()
100			}
101			/>
102
103			<Pressable style={styles.submitButton} onPress={() => addBalance()}>
104			<Text style={styles.buttonText}>Submit</Text>
105			</Pressable>
106			</View>
107			</Modal>
108
109
110			</View>
111			)
112			}
113
114			const styles = StyleSheet.create({
115			container: {
116			flex: 1,
117			backgroundColor: '#fff',
118			alignItems: 'center',
119			height: '50%',
120			width: '100%'
121
122			},
123
124			titleContainer: {
125			marginTop: 20,
126			width: '100%',
127			flexDirection: 'row',
128			height: 100,
129			justifyContent: 'center',
130			alignItems: 'center'
131			},
132
133
134			prepaidButton: {
135			backgroundColor: 'cornflowerblue',
136			width: '90%',
137			height: 50,
138			borderRadius: 50,
139			display: 'flex',
140			justifyContent: 'center',
141			alignItems: 'center',
142			marginTop: 30,
143			},
144
145			submitButton: {
146			backgroundColor: 'forestgreen',
147			width: '50%',
148			height: 50,
149			borderRadius: 50,
150			display: 'flex',
151			justifyContent: 'center',
152			alignItems: 'center',
153			},
154
155			infoContainer: {
156			width: '100%',
157			height: 350,
158			alignItems: 'center',
159			justifyContent: 'space-evenly',
160
161			},
162
163			prepaidContainer: {
164			width: '90%',
165			height: '30%',
166			alignItems: 'center',
167			justifyContent: 'center',
168			borderTopWidth: 1,
169			borderBottomWidth: 1,
170			borderColor: 'grey',
171			},
172
173			buttonText: {
174			color: 'white'
175			},
176
177			backButton: {
178			width: 40,
179			height: 40,
180			backgroundColor: 'white',
181			borderRadius: 25,
182			borderWidth: 1,
183			borderColor: 'gray',
184			alignItems: 'center',
185			justifyContent: 'center'
186			},
187			modalCloseContainer: {
188			width: '90%',
189			alignItems: 'flex-end',
190			},
191
192			closeButton: {
193			width: 25,
194			height: 25,
195			backgroundColor: 'white',
196			borderRadius: 25,
197			borderWidth: 1,
198			borderColor: 'gray',
199			alignItems: 'center',
200			justifyContent: 'center'
201			},
202
203			title: {
204			fontWeight: 'bold',
205			fontSize: 20,
206			width: '70%',
207			textAlign: 'center'
208			},
209
210			balance: {
211			fontWeight: 'bold',
212			fontSize: 50
213			},
214
215			info: {
216			fontSize: 15,
217			width: '80%',
218			color: 'gray',
219			textAlign: 'center'
220			},
221
222			prepaidInfo: {
223			fontWeight: 'bold',
224			fontSize: 18
225			},
226
227			shadowProp: {
228			elevation: 5,
229			shadowColor: 'black'
230			},
231
232			modalContainer: {
233			backgroundColor: 'rgba(220, 220, 220, 0.6)',
234			width: '100%',
235			height: '100%',
236			flex: 1,
237			},
238
239			modalMessage: {
240			backgroundColor: 'white',
241			width: '100%',
242			height: 200,
243			justifyContent: 'center',
244			alignItems: 'center',
245			borderRadius: 25
246			},
247
248			input: {
249			width: '90%',
250			marginBottom: 30,
251			borderRadius: 10,
252			height: 50,
253			padding: 10,
254			borderBottomWidth: 2,
255			borderColor: 'gray'
256			},
257			});

FalkenDev / SparkRentals-Mobile-App

Wallet.tsx ➔ Wallet B last analyzed 2023-01-12 17:40 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

Wallet.tsx ➔ Wallet B
last analyzed 2023-01-12 17:40 UTC